<template>
  <section class="bg-gray-fa lg:pt-20 lg:pb-12 py-9">
    <div class="lg:text-3xl text-xl text-center font-bold">平台演示</div>
    <div class="lg:flex hidden mt-10 container mx-auto space-x-8">
      <div class="p-[10px] rounded bg-white shadow">
        <img src="@/assets/img/yy.jpg" class="w-full" alt="" />
      </div>
      <div class="p-[10px] rounded bg-white shadow">
        <img src="@/assets/img/yy2.jpg" class="w-full" alt="" />
      </div>
      <div class="p-[10px] rounded bg-white shadow">
        <img src="@/assets/img/yy3.jpg" class="w-full" alt="" />
      </div>
    </div>
    <info-btn class="lg:flex hidden" @click.native="$store.commit('SQ')"
      >免费试用平台</info-btn
    >

    <div class="px-8 lg:hidden block">
      <van-swipe class="mt-5" :autoplay="5000" indicator-color="white">
        <van-swipe-item>
          <img
            src="@/assets/img/yy.jpg"
            class="p-2 rounded border border-gray-300 border-solid w-full"
            alt=""
          />
        </van-swipe-item>

        <van-swipe-item>
          <img
            src="@/assets/img/yy2.jpg"
            class="p-2 rounded border border-gray-300 border-solid w-full"
            alt=""
          />
        </van-swipe-item>

        <van-swipe-item>
          <img
            src="@/assets/img/yy3.jpg"
            class="p-2 rounded border border-gray-300 border-solid w-full"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>
    </div>
  </section>
</template>

<script>
export default {};
</script>

<style>
</style>